<template>
  <page-header-wrapper>
    <a-card :bordered="false" v-show="couponInfo">
      <a-page-header
        style="padding:0;"
        title="优惠券列表"
        @back="() => $router.go(-1)"
      />
      <a-descriptions title="优惠券信息">
        <a-descriptions-item label="优惠券"> {{ couponInfo.name }} </a-descriptions-item>
        <a-descriptions-item label="最低消费"> ¥{{ couponInfo.min_price }} </a-descriptions-item>
        <a-descriptions-item label="优惠方式"> {{ couponInfo.discount_type | filterType }} </a-descriptions-item>
        <a-descriptions-item label="已领"> {{ couponInfo.receive_count }} </a-descriptions-item>
        <a-descriptions-item label="剩余">{{ couponInfo.surplus_count }}</a-descriptions-item>
        <a-descriptions-item label="状态">{{ couponInfo.coupon_status | filterStatus }}</a-descriptions-item>
        <a-descriptions-item label="有效时间">
          <span v-if="couponInfo.expire_type == 1 && couponInfo.expire_day != 0">
            领卷后当日起{{ couponInfo.expire_day }}天内可用
          </span>
          <span v-else-if="couponInfo.expire_type == 1 && couponInfo.expire_day == 0">永久生效</span>
          <span v-if="couponInfo.expire_type == 2"
            >{{ couponInfo.begin_time }}至{{ couponInfo.end_time }}</span
          ></a-descriptions-item
        >
      </a-descriptions>

      <a-divider />
      <a-descriptions title="发放规则">
        <!-- <a-descriptions-item label="发放条件"> 页面转发，购买并付款，充值赠送，二维码领取 </a-descriptions-item>
        <a-descriptions-item label="单人每天获取数量"> {{ couponInfo.day_num }} </a-descriptions-item>
        <a-descriptions-item label="单人总共获取数量"> {{ couponInfo.day_count }} </a-descriptions-item> -->
      </a-descriptions>
      <a-table :columns="ruleColumns" :dataSource="ruleData" :pagination="false">
        <span slot="event" slot-scope="text">
          {{ couponInfo.event_text[text] }}
        </span>
      </a-table>

      <!-- <a-divider /> -->
      <a-descriptions title="用户领取信息"> </a-descriptions>
      <STable :columns="columns" :data="loadData">
        <span slot="nickname" slot-scope="text, item">
          <a-avatar :src="item.avatar_url" shape="square" size="45" />
          <span style="margin-left: 10px">{{ text }}</span>
        </span>

        <span slot="created_at" slot-scope="text">
          {{ (text * 1000) | moment }}
        </span>
      </STable>
      <!-- <p>用户领取信息</p> -->
      <!-- <a-table
        ref="tableList"
        @mouseleave.native="onMouseLeaveTable"
        :columns="columns"
        :data-source="dataSource"
        :row-key="(record) => record.id"
        :pagination="{
          total: this.totalCount,
          showSizeChanger: true,
          onChange: this.tablePageChange,
          onShowSizeChange: this.paginationSizeChange,
        }"
        :loading="loading"
        :customRow="
          (record, index) => {
            return {
              on: {
                mouseenter: (e) => {
                  this.currentRowId = record.id
                },
              },
            }
          }
        "
      >
      </a-table> -->
    </a-card>
  </page-header-wrapper>
</template>

<script>
import moment from 'moment'
import { STable } from '@/components'
// import SelectCat from './components/selectGoodsCat'
import SelectCat from '@/components/SearchCat/index'
import SelectGoods from '@/components/SearchGoods/index'
import SelectUser from '@/components/SelectUser/SelectUser'
import { couponDetail } from '@/api/marketing'

const mockData = {
  appoint_type: '2',
  begin_time: '2021-02-02',
  cat_id_list: '[]',
  cat_list: [],
  coupon_status: 1,
  created_at: '2021-06-25 10:53:14',
  desc: null,
  discount: '10.0',
  discount_type: '2',
  discount_type_text: '满减',
  end_time: '2021-12-31',
  expire_day: '1000',
  expire_type: '2',
  goods_id_list: '[172]',
  goods_list: [],
  id: '123',
  integral: '0',
  is_delete: '0',
  is_integral: '1',
  is_join: '2',
  is_join_text: '加入',
  is_join_welfare: '1',
  mch_id: '0',
  min_price: '10.00',
  name: '冠龙专属优惠券',
  pic_url: null,
  price: '0.00',
  rule: '哈哈哈',
  sort: '0',
  store_id: '1',
  sub_price: '1.50',
  surplus_count: 69,
  total_count: '80',
  total_num: '0',
  updated_at: '2021-06-25 10:54:25',
  user_num: '0',
}

export default {
  name: 'ArticleList',
  components: {
    STable,
    SelectCat,
    SelectGoods,
    SelectUser,
  },
  data() {
    return {
      coupon_id: 0,
      couponInfo: {},
      currentRowId: '',
      columns: [
        {
          title: 'ID',
          dataIndex: 'id',
          key: 'id',
        },
        {
          title: '用户信息',
          dataIndex: 'nickname',
          scopedSlots: { customRender: 'nickname' },
        },
        {
          title: '手机号',
          dataIndex: 'binding',
          key: 'binding',
        },
        {
          title: '已领取',
          dataIndex: 'receive_count',
          key: 'receive_count',
          sorter: (a, b) => a.receive_count - b.receive_count,
        },
        {
          title: '已使用',
          dataIndex: 'use_count',
          key: 'use_count',
          sorter: (a, b) => a.use_count - b.use_count,
        },
        {
          title: '获得时间',
          dataIndex: 'created_at',
          scopedSlots: { customRender: 'created_at' },

          sorter: (a, b) => a.created_at - b.created_at,
        },
      ],
      ruleColumns: [
        {
          title: '发放条件',
          dataIndex: 'event',
          scopedSlots: { customRender: 'event' },
        },
        {
          title: '单人每天获取数量',
          dataIndex: 'day_num',
        },
        {
          title: '单人总共获取数量',
          dataIndex: 'day_count',
        },
      ],
      page: {
        pageNo: 1,
        pageSize: 10,
      },
      loading: false,
      selectedRowKeys: [],
      ruleData: [],
      loadData: async (pageData) => {
        try {
          var formData = Object.assign(pageData, { key: this.coupon_id })
          const res = await couponDetail(formData)
          if (res.code != 0) throw res
          this.couponInfo = res.data.couponDetail
          this.ruleData = res.data.couponList

          return res.data
        } catch (error) {}
      },
    }
  },
  filters: {
    filterStatus(val) {
      const arr = ['未开始', '进行中', '已结束']
      return arr[val]
    },
    filterType(val) {
      if (!val) return
      // 1折扣 2满减
      const arr = ['折扣', '满减']
      return arr[val - 1]
    },
  },
  created() {
    this.coupon_id = this.$route.query.id ? this.$route.query.id : 0
    // this.couponInfo = mockData
    // this.getCouponDetail()
  },
  methods: {
    moment,
    onMouseLeaveTable(e) {
      if (e.relatedTarget && e.relatedTarget.className.indexOf('popover') != -1) {
        return
      }
      this.currentRowId = ''
    },
    async getCouponDetail() {
      try {
        const res = await couponDetail({ ...this.page, key: this.coupon_id })
        this.couponInfo = res.data
      } catch (error) {}
    },
    // 分页请求
    tablePageChange(e) {
      console.log(e)
      this.pageNo = e
      this.getCouponDetail()
    },
    // 分页器页数修改回调
    paginationSizeChange(current, size) {
      console.log(current, size)
      this.pageNo = current
      this.pageSize = size
      this.getCouponDetail()
    },
  },
}
</script>

<style lang="less" scoped>
/deep/.ant-descriptions-title {
  margin: 20px 0;
}
.flex-end-box {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  .row-box {
    display: flex;
    align-items: center;
    p {
      margin-bottom: 11px;
    }
  }
  .flex-row {
    display: flex;
    align-items: center;
  }
}
.flex-right {
  text-align: right;
  p:nth-child(1) {
    font-size: 14px;
    font-family: PingFangSC-Regular;
    line-height: 22px;
    color: rgba(0, 0, 0, 0.45);
    margin-bottom: 0;
  }
  p:nth-child(2) {
    font-size: 20px;
    font-family: PingFangSC-Regular;
    line-height: 28px;
    color: rgba(0, 0, 0, 0.85);
    margin: 6px 0 0 0;
  }
}
</style>
